<template>
	<view>
		<van-popup :show="show" custom-style="max-height:85vh" round  z-index="300" position="bottom"  @close="onClose">
		<view class="contain">
			<view class="sku-hearder">
				<image class="img" :src="model.img"></image>
				<view class="header-right">
					<view class="title">{{name}}</view>
					<view class="option-price">
					  <span style="font-size: 32rpx;font-weight: 400;">￥</span>{{ model.price }}
					</view>
					<view class="stock">剩余 {{model.stock}} 件</view>
					<view class="chooseSku">{{skuText}}</view>
				</view>
			</view>
			<view class="model-item" v-for="(item,index) in modelList" :key="item.id">
				<view class="item-name">{{item.name}}</view>
				<view class="childList-contain">
					<block v-for="(i,inde) in item.handleValue" :key="inde">
					  <view v-if="i.isStock" @click="handleChooseSku(index,inde)" :class="i.isChecked? 'childList-item-checked' : 'childList-item'" >{{i.text}}</view>
					  <view v-else class="childList-item" style="color: #c8c9cc; background: #f2f3f5;cursor: not-allowed;" >{{i.text}}</view>
					</block>
				</view>
			</view>
			<view class="settep-row">
				<view class="settep-text">购买数量</view>
				<view style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">
				<view style="margin-right: 20rpx;" class="buyLimit-text">{{buyLimit? `(限购${buyLimit}件)` : ''}}</view>
				<van-stepper
				  :value="count"
				  integer
				  @change="valChange"
				  :min="1"
				  :max=" !buyLimit||model.stock<buyLimit? model.stock : buyLimit"
				/>
				</view>
			</view>
			<view v-if="!isFromCar&&!isFromHome" @click="handleSkuDetermine"  class="btn-bottom">{{isPurchase? "立即购买" : '加入购物车'}}</view>
			<view v-if="isFromCar" style="margin-top: 60rpx;" @click="hanldeUpdataCar" class="btn-bottom">确定</view>
			<view v-if="isFromHome" class="btn-contain">
				<view class="btn-left" @click="hanldeAddCar">加入购物车</view>
				<view class="btn-right" @click="confirmOrder">立即购买</view>
			</view>
		</view>
		</van-popup>
	</view>
</template>

<script>
	import api from '../untils/api.js'
	export default {
		name:"sku",
		props:{
			show:false,
			commodityId:0,
			dateObj:null,
			isFromCar:false,
			isFromHome:false,
			isPurchase:false,
		},
		data() {
			return {
				buyLimit:0,
				skuText:"请选择",
				modelArr:[],
				modelList:[],
				model:{},
				name:"",
				count:1,
				orderId:0,
				price:0,
				modelImg:"",
				stock:0,
			};
		},
		methods:{
			confirmOrder(){
				if(this.modelList.length>0){
					if(this.model.id){
						if(this.model.stock>0){
							this.$emit("confirmOrder",{count:this.count,model:this.model,orderId:this.orderId,name:this.name});
						}
						else {
							uni.showToast({
								title: "库存不足！",
								icon:'none',
								duration:2000
							})  
						}
					}
					else {
						uni.showToast({
							title: "请先选择商品规格",
							icon:'none',
							duration:2000
						})  
					}
				}
				else {
					if(this.model.stock>0){
						this.$emit("confirmOrder",{count:this.count,model:this.model,orderId:this.orderId,name:this.name});
					}
					else {
						uni.showToast({
							title: "库存不足！",
							icon:'none',
							duration:2000
						})  
					}
				}
			},
			hanldeAddCar(){
				if(this.modelList.length>0){
					if(this.model.id){
						if(this.model.stock>0){
							this.$emit("hanldeAddCar",{count:this.count,modelId:this.model.id,orderId:this.orderId})
						}
						else {
							uni.showToast({
								title: "库存不足！",
								icon:'none',
								duration:2000
							})  
						}
					}
					else {
						uni.showToast({
							title: "请先选择商品规格",
							icon:'none',
							duration:2000
						})  
					}
				}
				else {
					if(this.model.stock>0){
						this.$emit("hanldeAddCar",{count:this.count,modelId:this.model.id,orderId:this.orderId})
					}
					else {
						uni.showToast({
							title: "库存不足！",
							icon:'none',
							duration:2000
						})  
					}
				}
			},
			handleSkuDetermine(){
				if(this.modelList.length>0){
					if(this.model.id){
						if(this.model.stock>0){
							if(!this.isPurchase){
								 this.$emit("hanldeAddCar",{count:this.count,modelId:this.model.id,orderId:this.orderId})  
							}
							else {
								 this.$emit("confirmOrder",{count:this.count,model:this.model,orderId:this.orderId,name:this.name});
							}
						}
						else {
							uni.showToast({
								title: "库存不足！",
								icon:'none',
								duration:2000
							})  
						}
					}
					else {
						uni.showToast({
							title: "请先选择商品规格",
							icon:'none',
							duration:2000
						})  
					}
				}
				else {
					if(this.model.stock>0){
						if(!this.isPurchase){
							this.$emit("hanldeAddCar",{count:this.count,modelId:this.model.id,orderId:this.orderId})  
						}
						else {
							this.$emit("confirmOrder",{count:this.count,model:this.model,orderId:this.orderId,name:this.name});
						}
					}
					else {
						uni.showToast({
							title: "库存不足！",
							icon:'none',
							duration:2000
						})  
					}
				}
				  
			},
			hanldeUpdataCar(){
				if(this.model.id){
					this.$emit("hanldeUpdataCar",{count:this.count,model:this.model,id:this.dateObj.id} )
				}
				else {
					uni.showToast({
						title: "请先选择商品规格",
						icon:'none',
						duration:2000
					})  
				}
			},
			handleChooseSku(index,childIndex){
				this.modelList[index].handleValue.forEach((item,i)=>{
					if(i===childIndex){
						item.isChecked=!item.isChecked
					}
					else {
						item.isChecked=false
					}
				})
			
					var chooseObj={}
					this.skuText="请选择"
					this.modelList.forEach((item)=>{
						var flag=false
						 item.handleValue.forEach((it)=>{
							 if(it.isChecked){
								 chooseObj[item.name]=it.text
								 flag=true
							 }
						 })
						 if(flag===false){
							 this.skuText=this.skuText+` ${item.name} `
						 }
					})
					
					if(this.skuText=="请选择"){
						this.skuText="已选";
						this.modelList.forEach((item)=>{
							 item.handleValue.forEach((it)=>{
								 if(it.isChecked){
									 this.skuText=this.skuText+` ${it.text} `
								 }
							 })
						})
						
						this.modelArr.forEach((item)=>{
							var flag=true
							this.modelList.forEach((i)=>{
								if( chooseObj[i.name] !== item.specificationsValue[i.name] ){
									flag=false
								}
							})
							if(flag){
								console.log(item)
								this.model={};
								this.model.freight=item.freight;
								this.model.price=item.price;
								this.model.img=item.img;
								this.model.stock=item.stock;
								this.model.id=item.id;
								this.model.specificationsValue=item.specificationsValue;
								this.model.wares=item.wares
								this.count=1
								this.buyLimit=item.buyLimit
							}
						})
					}else {
						this.model={};
						this.model.price=this.price;
						this.model.img=this.modelImg;
						this.model.stock=this.stock;
						this.count=1;
						this.buyLimit=0;
					}
				
				 this.freshStock();
			},
			freshStockFromCar(){
				var obj={}
				this.modelList.forEach((item)=>{
					  item.handleValue.forEach((i)=>{
						  if(i.isChecked){
							  obj[item.name]=i.text;
						  }
					  })
				})
				for(let key  in obj){
										 let  filterModelList=[]
											 this.modelArr.forEach((item)=>{
												if(item.specificationsValue[key]==obj[key]){
														filterModelList.push(item) 
													}  
											 }) 
										 this.modelList.forEach((item)=>{
											 if(item.name!==key){
												 item.handleValue.forEach((it)=>{
													 var flag=true
													filterModelList.forEach((z)=>{
														if(z.specificationsValue[item.name]==it.text&&it.isStock){
															it.isStock=true
															flag=false
														}
													})
													if(flag){
														it.isStock=false
													} 
												 }) 
											 }
										 })
				}
			},
			freshStock(){
			  var obj={}
			  var chooseLength=0
			  this.modelList.forEach((item)=>{
			  	  item.handleValue.forEach((i)=>{
			  		  if(i.isChecked){
			  			  obj[item.name]=i.text;
						  chooseLength++
			  		  }
			  	  })
			  })
				 if(chooseLength==0){
					this.modelList.forEach((item)=>{
							item.handleValue.forEach((z)=>{
								 var flag=true
								 this.modelArr.forEach((q)=>{
								    if(q.specificationsValue[item.name]==z.text){
								  			 z.isStock=true
											 flag=false
								  		 }
								  	})
								if(flag) z.isStock=false
						})   
					  
					}) 
				 }
				 if(chooseLength<=this.modelList.length){
						this.modelList.forEach((item)=>{
								 item.handleValue.forEach((it)=>{
									var skuObj=Object.assign({},obj)
									skuObj[item.name]=it.text
									it.isStock=false
									this.modelArr.forEach((ite)=>{
										var flag=true
										for(let key in ite.specificationsValue){
											if(skuObj[key]&&skuObj[key]!==ite.specificationsValue[key]){
												flag=false
											}
										}
										if(flag){
											it.isStock=true
										 return false
										}
									})
								 }) 
						 })
				 }
			     
			},
		   onClose(){
			   this.$emit("close")
		   },
		   valChange(e){
			   if(!this.model.id){
			   	uni.showToast({
			   		title: "请先选择商品规格",
			   		icon:'none',
			   		duration:2000
			   	}) 
				this.count=1;
				 return false;
			   }
			   if(e.detail>=this.buyLimit&&this.buyLimit!=0){
			   				uni.showToast({
			   					icon:"none",
			   					title:"已达到用户购买限制数量！",
			   					duration:1000
			   				}) 
					this.count=this.buyLimit;
					return false;
			   }
			   if(e.detail>=this.model.stock){
			   				uni.showToast({
			   					icon:"none",
			   					title:"数量已到达库存上限！",
			   					duration:1000
			   				})
					this.count=this.model.stock;
			   				   return false;
			   }
			   this.count=e.detail;
		   },
		   init(id,shareUserId){
			   this.orderId=id;
			   var obj={};
			   obj.id=id;
			   if(shareUserId){
				   obj.shareUserId=Number(shareUserId);
			   }
			   api.SM_WARES_DETAIL(JSON.stringify(obj)).then((res)=>{
			   	if(this.isFromCar) {
			   		this.model=this.dateObj.model
			   		this.count=this.dateObj.count
					this.buyLimit=this.dateObj.model.buyLimit
			   	}
			   	else {
					this.model={};
			   		this.model.price=res.data.body.price;
			   		this.model.img=res.data.body.modelImg;
			   		this.model.stock=res.data.body.stock;
					this.buyLimit=0;
					this.count=1;
			   	}
			   	this.name=res.data.body.name;
				this.price=res.data.body.price;
				this.modelImg=res.data.body.modelImg;
				this.stock=res.data.body.stock;
				if(res.data.body.smWaresSpecificationsLevels.length==0){
					this.skuText="暂无规格"
					this.modelList=[]
				}
				else {
					if(res.data.body.smWaresModels.length===0){
						this.skuText="请选择"
						res.data.body.smWaresSpecificationsLevels.forEach((item)=>{
							this.skuText=this.skuText+` ${item.name} `
							item.valueArea=JSON.parse(item.valueArea)
							item.handleValue=[]
							item.valueArea.forEach((z)=>{
								 var obj={}
								  obj.text=z;
								  obj.isChecked=false;
								  obj.isStock=false;
							  item.handleValue.push(obj)
							})
						})
						this.modelList= res.data.body.smWaresSpecificationsLevels
						
					}
					else {
						this.modelArr=res.data.body.smWaresModels.filter(function(item){
							return item.stock>0
						})
						this.modelArr.forEach((item)=>{
							item.specificationsValue=JSON.parse(item.specificationsValue)
						})
						
						res.data.body.smWaresSpecificationsLevels.forEach((item)=>{
							item.valueArea=JSON.parse(item.valueArea)
							item.handleValue=[]
							this.modelArr.forEach((i)=>{
								item.valueArea.forEach((z)=>{
									 var obj={}
								  if(z==i.specificationsValue[item.name]){
									  obj.text=z;
									  obj.isChecked=false;
									  obj.isStock=true;
								  }
								  else {
									  obj.text=z;
									  obj.isChecked=false;
									  obj.isStock=false;
								  }
								  item.handleValue.push(obj)
								})
							});
						})
						
						res.data.body.smWaresSpecificationsLevels.forEach((item)=>{
							for(var i=0; i<item.handleValue.length; i++){
								ccc:
							            for(var j=i+1; j<item.handleValue.length; j++){
							                if(item.handleValue[i].text===item.handleValue[j].text){
												if(item.handleValue[i].isStock===item.handleValue[j].isStock){
													item.handleValue.splice(j,1);
													j--;
												}
							                    else if (item.handleValue[i].isStock){
													item.handleValue.splice(j,1);
													j--;
												}
												else {
													item.handleValue[i].isStock=true
													item.handleValue.splice(j,1);
													j--;
												}
							                }
							            }
										
							}
						})
						
						this.modelList= res.data.body.smWaresSpecificationsLevels
						
						if(this.isFromCar){
							 if(typeof this.model.specificationsValue!=="object") {
								 this.model.specificationsValue=JSON.parse(this.model.specificationsValue)
							 }
							this.skuText="已选"
							this.modelList.forEach((item)=>{
								this.skuText=this.skuText+` ${this.model.specificationsValue[item.name]} `
								item.handleValue.forEach((itm)=>{
									if(itm.text==this.model.specificationsValue[item.name]){
										itm.isChecked=true
									}
								})
							})
					      this.freshStockFromCar();
						}
						else {
							this.skuText="请选择"
							res.data.body.smWaresSpecificationsLevels.forEach((item)=>{
								this.skuText=this.skuText+` ${item.name} `
							})
						 }
					}
				  }
			   })
			   .catch((err)=>{
				   this.$emit("close")
			   })
		   },
		},
		mounted() {
			
		}
	}
</script>

<style>
	.btn-left{
		   flex: 1;
		    background: #e4efff;
			color: #3b89ed;
			border-top-left-radius: 20px;
			border-bottom-left-radius: 20px;
			font-weight: 500;
			font-size: 14px;
			text-align: center;
			line-height: 80rpx;
	}
	.btn-right{
		text-align: center;
		line-height: 80rpx;
		   flex: 1;
		  background: #4f99fd;
			color: #fff;
			border-top-right-radius: 20px;
			    border-bottom-right-radius: 20px;
			font-weight: 500;
			font-size: 14px;
	}
	.btn-contain{
		width: 85vw;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
		margin-top: 70rpx;
	}
	.childList-item-checked{
		padding: 20rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 80rpx;
		margin: 0 12px 12px 0;
		font-size: 13px;
		line-height: 16px;
		vertical-align: middle;
		color: #3b8aed;
		border: 1rpx solid #3b8aed;
		border-radius: 4px;
		cursor: pointer;
		background: rgb(236,244,253);
	}
	.childList-item{
		    padding: 20rpx;
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    min-width: 80rpx;
		    margin: 0 12px 12px 0;
		    font-size: 13px;
		    line-height: 16px;
		    vertical-align: middle;
			color: #323233;
			border-radius: 4px;
			cursor: pointer;
			background: rgb(236,244,253);
	}
	.item-name{
		padding-bottom: 20rpx;
	}
	.model-item{
		margin-top: 30rpx;
	}
	.childList-contain{
		display: flex;
		flex-direction: row;
	}
	.btn-bottom{
		width: 88vw;
		height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		background: #1989fa;
		margin: 0 auto;
	}
	.settep-row{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0rpx;
	}
	.chooseSku{
		    color: #969799;
		    font-size: 12px;
		    line-height: 16px;
	}
	.stock{
		margin-bottom: 10rpx;
		color: #969799;
		font-size: 12px;
		line-height: 16px;
	}
	.option-price{
		color: #ee0a24;
		vertical-align: bottom;
		font-weight: 500;
		font-size: 44rpx;
		margin-bottom: 10rpx;
	}
	.title{
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}
	.header-right{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.img{
		width: 96px;
		height: 96px;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}
      .sku-hearder{
		  display: flex;
		  flex-direction: row;
		  align-items: center;
	  }
	  .contain{
		  width: 100%;
		  height: auto;
		  padding: 30rpx 20rpx;
	  }
</style>
